<template>
	<view>
		<!-- 昵称 -->
		<u--form :model="userInfo" ref="uFormName" labelWidth='60' :rules='rules' class="form">
			<u-form-item label="昵称" prop="name" required>
				<u-input v-model="userInfo.name" />
			</u-form-item>
			<u-button type="primary" @click="submit('name')">提交</u-button>
		</u--form>
		<!-- 邮箱 -->
		<u--form :model="userInfo" ref="uFormEmail" labelWidth='60' :rules='rules' class="form">
			<u-form-item label="邮箱" prop="email" required inLine>
				<u-input v-model="userInfo.email" />
				<u-button type="primary"  style="width: 100px;margin-left: 10px;" @click="getEmailCode">获取验证码</u-button>
			</u-form-item>
			<u-form-item label="验证码"  prop="emailCode" required>
				<u-input v-model="userInfo.emailCode" />
			</u-form-item>
			<u-button type="primary" @click="submit('email')">提交</u-button>
		</u--form>
		<!-- 手机 -->
		<u--form :model="userInfo" ref="uFormPhone" labelWidth='60' :rules='rules' class="form">
			<u-form-item label="手机号" prop="phone" required inLine>
				<u-input v-model="userInfo.phone" />
				<u-button type="primary"  style="width: 100px;margin-left: 10px;" @click="getPhoneCode">获取验证码</u-button>
			</u-form-item>
			<u-form-item label="验证码"  prop="phoneCode" required>
				<u-input v-model="userInfo.phoneCode" />
			</u-form-item>
			<u-button type="primary" @click="submit('phone')">提交</u-button>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					email:'',
					password:'',
					phone:'',
					emailCode:'',
				},
				mobileCode:'',
				rules: {
					name: [{
						required: true,
						message: '请输入昵称',
						trigger: ['change', 'blur']
					}],
					email: [{
						required: true,
						message: '请输入邮箱',
						type:'email',
						trigger: ['change', 'blur']
					}],
					emailCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur']
					}],
					phoneCode: [{
						required: true,
						message: '请输入验证码',
						trigger: ['change', 'blur']
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					}],
				}
			}
		},
		onLoad() {
			this.$u.utils.isLogin()
			let lifeData =uni.getStorageSync('lifeData')
			this.userInfo = lifeData['vuex_user']
		},
		methods: {
			//提交
		  submit(type) {
				if(type=='name'){
					this.$refs.uFormName.validate().then(async res => {
						if(res){
							await this.$u.api.updateUserName({name:this.userInfo.name})
							this.$u.toast('更新成功')
						}
					}).catch(errors => {
						uni.$u.toast('校验失败')
					})
				}else if(type=='email'){
					this.$refs.uFormEmail.validate().then(async res => {
						if(res){
							await this.$u.api.updateEmail({email:this.userInfo.email,code:this.userInfo.emailCode})
							this.$u.toast('更新成功')
						}
					}).catch(errors => {
						uni.$u.toast(errors)
					})
				}else if(type=='phone'){
					this.$refs.uFormPhone.validate().then(async res => {
						console.log(res+'2')
						if(res){
							await this.$u.api.updatePhone({phone:this.userInfo.phone,code:this.userInfo.phoneCode})
							this.$u.toast('更新成功')
						}
					}).catch(errors => {
						uni.$u.toast(errors)
					})
				}
			
			},
			//获取邮箱验证码
			async getEmailCode(){
				const email = {email:this.userInfo.email}
				let res = await this.$u.api.getEmailCode(email)
			},
			//获取手机验证码
			async getPhoneCode(){
				const phone = {phone:this.userInfo.phone}
				let res = await this.$u.api.getPhoneCode(phone)
			}
		}
	}
</script>

<style>
	.form {
		margin: 60rpx;
	}
</style>
